<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
</head>
<body>
    <nav data-th-fragment="page" data-th-if="${page.totalPage gt 0}" data-th-object="${page}">
        <!-- 处理页数小于等于7 的情况 -->
        <ul class="pagination" data-th-if="${page.totalPage le 7}" >
            <!-- 总记录数 -->
            <li class="tbpage-total-elements disabled">共[[${page.totalCount}]]条</li>

            <!--&lt;!&ndash; 页面大小 &ndash;&gt;-->
            <!--<select class="custom-select " style="width: 100px" data-th-attr="pageIndex=${page.pageNo}">-->
                <!--<option  data-th-each="i : ${#arrays.toIntegerArray({5,10,15,20})}" data-th-value="${i}"-->
                        <!--data-th-selected="${i eq page.pageSize}" th:value="${i}"></option>-->
            <!--</select>-->

            <!-- 上一页 -->
            <li class="page-item" data-th-classappend="*{pageNo eq 1} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo} - 1" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>

            <!-- 迭代生成页码 -->
            <li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPage)}"
                data-th-classappend="${(page.pageNo) eq i } ? 'active' : ''" >
                <a class="page-link tbpage-item" data-th-attr="pageIndex=${i}" href="javascript:void(0);">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <!-- 下一页 -->
            <li class="page-item" data-th-classappend="*{pageNo eq totalPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo} + 1" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>

        <!-- 处理页数大于7 的情况 -->
        <ul class="pagination" data-th-if="${page.totalPage gt 7}" >
            <!-- 总记录数 -->
            <li class="tbpage-total-elements disabled">共[[${page.totalCount}]]条</li>

            <!--&lt;!&ndash; 页面大小 &ndash;&gt;-->
            <!--<select class="custom-select tbpage-size" style="width: 100px" data-th-attr="pageIndex=${page.pageSize}">-->
                <!--<option data-th-each="i : ${#arrays.toIntegerArray({5,10,15,20})}" data-th-value="${i}"-->
                        <!--th:data-th-selected="${i eq page.pageSize}" th:data-th-text="${i}"></option>-->
            <!--</select>-->

            <!-- 上一页 -->
            <li class="page-item" data-th-classappend="*{pageNo eq 1} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo} - 1" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>

            <!-- 首页 -->
            <li class="page-item" data-th-classappend="${(page.pageNo) eq 1} ? 'active' : ''" >
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=1">1</a>
            </li>


            <!-- 当前页面小于等于4 -->
            <li class="page-item" data-th-if="${(page.pageNo) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}"
                data-th-classappend="${(page.pageNo) eq i} ? 'active' : ''" >
                <a class="page-link tbpage-item" href="javascript:void(0);" data-th-attr="pageIndex=${i}">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <li class="page-item disabled" data-th-if="${(page.pageNo) le 4}">
                <a href="javascript:void(0);" class="page-link tbpage-item">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!-- 最后一页与当前页面之差，小于等于3 -->
            <li class="page-item disabled" data-th-if="${(page.totalPage-(page.pageNo)) le 3}">
                <a href="javascript:void(0);" class="page-link tbpage-item">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item" data-th-if="${(page.totalPage-(page.pageNo)) le 3}" data-th-each="i : ${#numbers.sequence(page.totalPage-3, page.totalPage-1)}"
                data-th-classappend="${(page.pageNo) eq i} ? 'active' : ''" >
                <a class="page-link tbpage-item" href="javascript:void(0);" data-th-attr="pageIndex=${i}">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <!-- 最后一页与当前页面之差大于3，且  当前页面大于4-->

            <li class="page-item disabled" data-th-if="${((page.pageNo) gt 4) && ((page.totalPage-(page.pageNo)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link tbpage-item">
                    <span aria-hidden="true">...</span>
                </a>
            </li>
            <li class="page-item" data-th-if="${((page.pageNo) gt 4) && ((page.totalPage-(page.pageNo)) gt 3 )}" >
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo - 1}">[[${page.pageNo - 1}]]</a>
            </li>
            <li class="page-item active" data-th-if="${((page.pageNo) gt 4) && ((page.totalPage-(page.pageNo)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo}">[[${page.pageNo}]]</a>
            </li>
            <li class="page-item" data-th-if="${((page.pageNo) gt 4) && ((page.totalPage-(page.pageNo)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo + 1}">[[${page.pageNo + 1}]]</a>
            </li>

            <li class="page-item disabled"  data-th-if="${((page.pageNo) gt 4) && ((page.totalPage-(page.pageNo)) gt 3 )}">
                <a href="javascript:void(0);" class="page-link tbpage-item">
                    <span aria-hidden="true">...</span>
                </a>
            </li>

            <!-- 最后一页 -->
            <li class="page-item" data-th-classappend="${(page.pageNo) eq page.totalPage} ? 'active' : ''" >
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.totalPage}">[[${page.totalPage}]]</a>
            </li>

            <!-- 下一页 -->
            <li class="page-item" data-th-classappend="*{pageNo eq totalPage} ? 'disabled' : ''">
                <a href="javascript:void(0);" class="page-link tbpage-item" data-th-attr="pageIndex=${page.pageNo + 1}" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>